<script setup>

import {ref} from "vue";
import axios from "axios";
import qs from "qs";
import {ElMessage} from "element-plus";
import router from "@/router";

const user=ref({username:"",password:"",nickname:""});
const reg=()=>{
  let data = qs.stringify(user.value);
  axios.post(BASE_URL+"/v1/users/reg",data).then((response)=>{
    if (response.data.code===20000){
      ElMessage.success("注册成功!");
      router.push("/patient/login");
    }else ElMessage.error(response.data.message);
  })
}
</script>

<template>
  <div style="font-size: 50px;height: 165px;line-height: 200px">
    欢迎注册
  </div>
  <el-row class="row">
    <el-col :span="4">
      <div class="rowDiv">用户名</div>
    </el-col>
    <el-col :span="20">
      <el-input placeholder="请输入用户名" v-model="user.username" class="loginInput"/>
    </el-col>
  </el-row>
  <el-row class="row">
    <el-col :span="4">
      <div class="rowDiv">密码</div>
    </el-col>
    <el-col :span="20">
      <el-input type="password" placeholder="请输入密码" v-model="user.password" class="loginInput"/>
    </el-col>
  </el-row>
  <el-row class="row">
    <el-col :span="4">
      <div class="rowDiv">姓名</div>
    </el-col>
    <el-col :span="20">
      <el-input placeholder="请输入您的姓名" v-model="user.nickname" class="loginInput"/>
    </el-col>
  </el-row>
    <div style="height: 30px">
      <div style="text-align: left">
        <router-link to="/patient/login" class="loginRouterLink">
          已有帐号?点击登录
        </router-link>
      </div>
    </div>
    <el-button class="login" @click="reg()">注 &nbsp; &nbsp; 册</el-button>
</template>

<style scoped>
.loginRouterLink{
  text-decoration: none;
  color: #2ce;
}
.login{
  width: 300px;
  height: 60px;
  margin: 0 auto;
  font-size: 24px;
  font-family: 微软雅黑,sans-serif;
  color: #fff;
  border-radius: 30px;
  line-height: 60px;
  background-color: rgb(21,168,255);
}
.row{
  margin: 25px 0
}
.rowDiv{
  font-size: 25px;
  padding: 10px 0 0 30px;
  width: 100px
}
.loginInput{
  width:400px;
  height:60px;
  font-size: 25px;
}
</style>